<template>
  <el-container>
    <el-header style="height: 40px">
      <span style="font-size: 30px">消息通知</span>
    </el-header>
    <el-main>
      <el-container>
        <el-header style="height: 40px">
          <el-container>
            <el-main>
              <div style="font-size: 20px">
                <a class="pointer" @click="getMessageList">全部消息通知</a><span style="margin: 0 10px">  | </span>
                <a class="pointer" @click="getMessageList(0)">已申请</a><span style="margin: 0 10px"> | </span>
                <a class="pointer" @click="getMessageList(1)">已通过</a><span style="margin: 0 10px"> | </span>
                <a class="pointer" @click="getMessageList(2)">已拒绝</a><span style="margin: 0 10px"> | </span>
              </div></el-main>
<!--            <el-aside width="320px">-->
<!--              <div >-->
<!--                <el-input v-model="queryParams.inputContent" placeholder="商品名或订单号" clearable style="width: 220px"></el-input>-->
<!--                <el-button icon="el-icon-search" @click="submitSearch" style="border-left: none">搜索</el-button>-->
<!--              </div>-->
<!--            </el-aside>-->
          </el-container>
        </el-header>
        <el-main>
          <!--数据区-->
          <el-table
              :data="tableData"
              v-loading="loading"
              style="width: 100%">
            <el-table-column prop="sendTime" label="申请时间" min-width="20%" align="center">
            </el-table-column>
            <el-table-column prop="message" label="消息通知内容" min-width="30%" align="center">
            </el-table-column>
            <el-table-column prop="status" label="消息状态" min-width="20%" align="center">
              <template v-slot="scope">
                <el-tag effect="dark" v-if="scope.row.status==0">已申请</el-tag>
                <el-tag type="success" effect="dark" v-else-if="scope.row.status==1">已通过</el-tag>
                <el-tag type="danger" effect="dark" v-else-if="scope.row.status==2">被拒绝</el-tag>
              </template>
            </el-table-column>
          </el-table>

          <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @pagination="getOrder(0)"
          />

        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import { getMessage } from '@/api/user'
export default {
  // 个人中心——消息通知
  name: "userMessage",
  data() {
    return {
      tableData: [
        // {
        //   sendTime: "2021-11-19 12:16:61",
        //   message: "申请充值500",
        //   status: 1
        // }
      ],
      // 数据总数量
      total: 0,
      // 分页的数据
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: undefined
      },
      loading: true,
    }
  },
  created() {
    this.getMessageList()
  },
  methods: {
    getMessageList(status) {
      let params = this.queryParams;
      params.status = status;
      getMessage(params).then((response) => {
        this.tableData = response.notepads.rows
        this.total = response.notepads.total
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

.pointer {
  cursor: pointer;
}

</style>
